/**
 *@description 用户画像-》生命周期
 *@author yhw
 */
import React, { PropTypes } from 'react';
import ReactEcharts from 'echarts-for-react';
import styles from './LifeCycle.less';

const LifeCycle = ({width,height,data}) => {
    let mydata={xAxisData:[], value:[], value1:[]};
    let lifeName = ['粉丝','注册会员','用户','品牌大使'];
    lifeName.forEach(function(item,index) {
        let lvalue = data[item]?data[item]:0;
         mydata.xAxisData.push(item);
         mydata.value.push({"name": item,"value": lvalue, "xAxis": index, "yAxis": lvalue});
         mydata.value1.push(lvalue);
    });

    let option = {
            "events": {
                click: function(param) {
                    alert(param)
                }
            },
            "grid": {
                "borderWidth": 0,
                "x2": "15%"
            },
            "calculable": true,
            "xAxis": [{
                "show": true,
                "splitLine": {
                    "show": false
                },
                "type": "category",
                "boundaryGap": false,
                "data": mydata.xAxisData,
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#fff",
                        "width": 1
                    }
                },
                "axisTick": {
                    "show": false
                },
                "axisLabel": {
                    "textStyle": {
                        "color": "#fff",
                        "fontFamily": "Microsoft Yahei",
                        "fontSize": 14
                    },
                    "margin": 16
                }
            }],
            "toolbox": {
                "show": false
            },
            "yAxis": [{
                "show": false,
                "type": "value"
            }],
            "tooltip": {
                "trigger": "item",
                formatter: function(arg){
                    return arg.seriesName+'<br />'+arg.name+'：'+(parseInt(arg.value).formatMoney())
                },
                "showDelay": 0,
                "hideDelay": 50,
                "transitionDuration": 0,
                "backgroundColor": "rgba(255,255,255,0.5)",
                "borderColor": "rgba(255,255,255,0.5)",
                "borderRadius": 6,
                "enterable": false,
                "borderWidth": 2,
                "padding": [5,10, 5, 10],
                "textStyle": {
                    "color": "#666",
                    "decoration": "none",
                    "fontFamily": "Microsoft Yahei",
                    "fontSize": 15,
                    "fontStyle": "normal",
                    "align": "left"
                },
                /**
                 * @description 生命周期图Tootip(第四个tooltip标题四个字折行)
                 * @param  number params.dataIndex 第几个圆
                 * @param  sheng (0:下降,1:上升)
                 * @return string
                 */
                /*formatter: function(params, ticket, callback) {
                    var sheng = 1;
                    var str;
                    if (params.dataIndex == 3) {
                        str = '<div class="maopao" style="max-width:70px;word-break:normal;white-space:normal;">' + 123 + '</div><p class="maopao" style="max-width:70px;word-break:normal;white-space:normal;">' + commafy(params.data.value) + '</p>'
                    } else {
                        str = '<div class="maopao">' + 123 + '</div><p class="maopao">' + 'asd' + '</p>'
                    }
                    if (sheng == 0) {
                        str += '<span class="shengj up"><i></i>' + 222 + '</span>';
                    } else {
                        str += '<span class="shengj down"><i></i>' + 222 + '</span>';
                    }
                    return str;
                }*/
            },
            "series": [{
                "legendHoverLink": false,
                "name": "生命周期",
                "type": "line",
                "itemStyle": {
                    "normal": {
                        "lineStyle": {
                            "color": "#fff",
                            "width": 2
                        }
                    }
                },
                "symbol": "none",
                "markPoint": {
                    "label":{
                        "normal":{
                            show: true,
                            formatter: function(arg){
                                    return (parseInt(arg.value).formatMoney())
                            },
                        }
                    },
                    "clickable": true,
                    "symbol": "circle",
                    "itemStyle": {
                        "emphasis": {
                            "label": {
                                //"position": "bottom",
                                "textStyle": {
                                    "fontFamily": "微软雅黑",
                                    "color": "#fff",
                                    "fontSize": 14
                                }
                            },
                            "color": "#f09a09",
                            // "color": "rgba(255,255,255,0.2)",
                            // "borderColor": "rgba(255,255,255,0.1)"
                        },
                        "normal": {
                            "label": {
                                "show": true,
                                "textStyle": {
                                    "fontFamily": "微软雅黑",
                                    "color": "#fff",
                                    "fontSize": 14
                                }
                            },
                            "color": "#f09a09",
                            // "borderColor": "rgba(255,255,255,0.3)",
                            "borderWidth": 8
                        },
                        // "formatter": "Data formatter: <br/>{a}<br/>{b}:{c}"
                    },
                    symbolSize: function(v) {
                        var num_val = option.series[0].markPoint.data;
                        var arr = [];
                        num_val.forEach(function(value){
                            arr.push(value.value)
                        })
                        var _max = Math.max.apply(null,arr);
                        var chu = 70*(v/_max)>20?70*(v/_max):20;
                        if(v == 0){
                            chu = 0;
                        }
                        return chu
                    },
                    "data": mydata.value
                },
                "data": mydata.value1
            }]
        };
    let onEvents = {
        'click': function(param, echart) {
                // 标记类型
                window.localStorage.setItem("imgType", "life_cycle");
                window.localStorage.setItem("imgTypeValue", param.name);
                window.location.hash = '#/PersonsInfo';
        }
    };
    return (<div> <ReactEcharts option = {option} style = {{width:width, height:height}} theme = {"theme_name"} onEvents={onEvents}/></div>);
}

LifeCycle.propTypes = {
    // width: PropTypes.number,//.isRequired,
    height: PropTypes.number.isRequired,
    data: PropTypes.object
};


// export default connect(mapStateToProps)(LifeCycle);
export default LifeCycle;